<template>
	<view class="containerBox">
		<view class="topCard">
			<!-- 信息 -->
			<view class="name_Card">
				<view class="title_code"
					><text
						style="
							display: inline-block;
							padding: 5rpx 5rpx 0 0;
							background: #4cd964;
						"
						>卡在用</text
					></view
				>
				<view style="padding: 0 30rpx; padding-bottom: 50rpx">
					<view style="font-weight: 400"
						><u-icon name="map" color="#fff" size="28"></u-icon>{{ curHos }}
						<text style="margin-left: 40rpx">就诊卡</text></view
					>
					<view class="card_number">
						<view>
							<view style="color: rgba(255, 255, 255, 0.6); font-size: 26rpx"
								>就诊卡号</view
							>
							<view>{{ patientcardNo }}</view>
						</view>
						<view style="margin-left: 25rpx">
							<view style="color: rgba(255, 255, 255, 0.6); font-size: 26rpx"
								>可用余额</view
							>
							<view>￥0 </view>
						</view>
					</view>
				</view>
			</view>
			<!-- 二维码 -->
			<view class="code_Card">
				<view class="code_title">
					<view style="width: 82%; padding-left: 20%"
						>点击放大{{ idx == 0 ? '二维码' : '条形码' }}</view
					>
					<view
						><u-icon name="reload" color="blue"></u-icon
						><view style="display: inline-block; margin-left: 10rpx"
							>刷新</view
						></view
					>
				</view>
				<view class="code_content">
					<view v-if="idx == 0" @click="QRcode"
						><img
							src="https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg"
							alt=""
					/></view>
					<view v-if="idx == 1" @click="QRcode_1"
						><img
							style="width: 270rpx"
							src=""
							alt=""
					/></view>
					<view>{{ patientcardNo }}</view>
				</view>
			</view>
			<view class="tabsStyle">
				<view style="padding: 0; border-radius: 100rpx; overflow: hidden">
					<view
						:class="{ tab_Style: idx == index }"
						v-for="(item, index) in tabList"
						:key="index"
						@click="tabChange(index)"
						>{{ item.name }}</view
					></view
				></view
			>
			<view class="card_bottom">
				<view>{{ userInfo.userName }}</view>
			</view>
		</view>
		<!-- 底部 -->
		<view style="margin-top: 35rpx; padding-bottom: 25rpx">
			<view class="list">
				<!-- <text class="title">门诊服务</text> -->
				<u-grid :col="2">
					<u-grid-item
						v-for="(item, index) in dealList"
						:key="index"
						@click="itemClick(item.code)"
					>
						<u-icon :name="item.picture" :size="46"></u-icon>
						<view class="grid-text">{{ item.name }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data() {
		return {
			tabList: [{ name: '二维码' }, { name: '条形码' }],
			dealList: [
				// { code: 'chongzhi', name: '就诊卡充值', picture: 'lock' },
				// { code: 'tuikuan', name: '就诊卡退款', picture: 'lock' },
				{ code: 'jilu', name: '交易记录', picture: 'lock' },
				{ code: 'qingdan', name: '门诊费用清单', picture: 'lock' },
			],
			images: {
				a: 'https://bkimg.cdn.bcebos.com/pic/2934349b033b5bb571dc8c5133d3d539b600bc12?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg',
				b: '',
			},
			idx: 0,
		}
	},
	computed: {
		...mapState({
			curHos: state => state.curHos,
			patientcardNo: state => state.patientcardNo,
			userInfo: state => state.userInfo,
		}),
	},
	methods: {
		tabChange(index) {
			console.log('1231')
			this.idx = index
		},
		QRcode() {
			wx.previewImage({
				current: this.images.a, // 当前显示图片的http链接
				urls: [this.images.a], // 需要预览的图片http链接列表
			})
		},
		QRcode_1() {
			wx.previewImage({
				current: this.images.b,
				urls: [this.images.b],
			})
		},
		itemClick(item) {
			if (item == 'chongzhi') {
				uni.navigateTo({
					url: './patient_chongzhi',
				})
			} else if (item == 'tuikuan') {
				uni.navigateTo({
					url: './patient_tuikuan',
				})
			} else if (item == 'jilu') {
				uni.navigateTo({
					url: './patient_jiaoyi',
				})
			} else if (item == 'qingdan') {
				uni.navigateTo({
					url: './patient_qingdan',
				})
			}
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
}
.containerBox {
	padding: 20rpx;
	.topCard {
		border-radius: 20rpx;
		overflow: hidden;
		.name_Card {
			background-color: #5690fb;
			color: #fff;
			font-weight: bold;
			// text-align: center;
			.title_code {
				text-align: right;
				test {
					padding: 0 10rpx;
					background: #3efd00ab;
					font-weight: lighter;
					border-bottom-left-radius: 10px;
				}
			}
			.card_number {
				display: flex;
				padding-top: 15rpx;
				view {
					flex: 1;
				}
			}
		}
	}
	.code_Card {
		padding: 20rpx;
		background-color: #fff;
		.code_title {
			padding-top: 15rpx;
			display: flex;
			text-align: center;
		}
		.code_content {
			text-align: center;
			margin-top: 40rpx;
			img {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
	.tabsStyle {
		text-align: center;
		background-color: #fff;
		padding-bottom: 20rpx;
		view {
			display: inline-block;
			color: #9e9c9c;
			background-color: #ececec;
			padding: 5px 10px;
			transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
		.tab_Style {
			color: #ffffff;
			background: #5690fb;
			border-radius: 50px;
			transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
		}
	}
	.card_bottom {
		background-color: #fff;
		text-align: center;
		padding: 15rpx;
		padding-bottom: 30rpx;
		view {
			background: #f3f4f6;
			font-weight: bold;
			font-size: 34rpx;
		}
	}
}
</style>